<template>
  <!-- 角色权限管理 -->
  <a-tree
    v-model="checkedKeys"
    checkable
    :selected-keys="selectedKeys"
    :tree-data="treeInfo"
    :replace-fields="replaceFields"
    @select="onSelect"
    @check="onCheck"
    v-if="treeInfo.length>0"
    :defaultExpandAll="defaultExpandAll"
    :autoExpandParent="true"
    :defaultExpandedKeys="expandedKeys"
    :defaultCheckedKeys="checkedKeys "
    :checkedKeys="checkedKeys"
  />
</template>
<script>
export default {
  data() {
    return {
      autoExpandParent: true,
      defaultExpandAll: true,
      selectedKeys: [],
      checkedKeys: [],
      expandedKeys: [],
      treeInfo: [],
      replaceFields: {
        children: 'sysMenu',
        key: 'MenuId',
        title: 'MenuName',
      },
    }
  },
  props: {
    treeData: {
      default: () => [],
      type: Array,
    },
    defaultCheckedKeys: {
      default: () => [],
      type: Array,
    },
  },
  watch: {
    treeData(val) {
      console.log('treeData :>> ', val)
      this.treeInfo = val
      this.$nextTick(() => [(this.expandedKeys[0] = this.treeInfo[0].MenuId)])
    },
    defaultCheckedKeys(val) {
      this.$nextTick(() => {
        this.checkedKeys = val
      })
    },
    checkedKeys() {
      console.log(' checkedKeys:>> ', this.checkedKeys)
      this.$emit('roleAuthCheckKeys', this.checkedKeys)
    },
    selectedKeys() {
      console.log(' selectedKeys:>> ', this.selectedKeys)
    },
    expandedKeys(val) {
      console.log('expandedKeys :>> ', val)
    },
  },
  created() {},
  mounted() {
    this.expandedKeys = []
    console.log('this.treeData[0] :>> ', this.treeData[0])
    if (this.treeData && this.treeData.length > 0) {
      this.expandedKeys.push(this.treeData[0].MenuId)
    }
  },
  methods: {
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys
      // this.autoExpandParent = false
    },
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys)
      this.checkedKeys = checkedKeys
    },
    onSelect(selectedKeys, info) {
      console.log('onSelect', info)
      console.log('selectedKeys :>> ', selectedKeys)
      this.selectedKeys = selectedKeys
    },
  },
}
</script>
